<template>
  <div id="wrapper">
    <main>
      <div class="left-side">
        <h1>Electron-Vue</h1>
        <system-information></system-information>
      </div>
      <File></File>
      <WindowOpen></WindowOpen>
      <Dialog></Dialog>
      <Menu></Menu>
    </main>
  </div>
</template>

<script>
  import SystemInformation from '@/components/SystemInformation'
  import File from '@/components/File'
  import WindowOpen from '@/components/WindowOpen'
  import Dialog from '@/components/Dialog'
  import Menu from '@/components/Menu'

  export default {
    name: 'landing-page',
    components: { SystemInformation, File , WindowOpen, Dialog, Menu},
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      }
    }
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body { font-family: 'Source Sans Pro', sans-serif; }

  #wrapper {
    background:
      radial-gradient(
        ellipse at top left,
        rgba(255, 255, 255, 1) 40%,
        rgba(229, 229, 229, .9) 100%
      );
    height: 100vh;
    padding: 60px 80px;
    width: 100vw;
  }


  main {
    display: flex;
    justify-content: space-between;
  }

  main > div { flex-basis: 50%; }

</style>
